<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
				background: #000000;
				text-align: center;
			}

			/*
			display: inline-block; 能让子元素在父元素中居中显示。
			*/
			h1 {
				/* transition: 1s; */
				margin-top: 50px;
				display: inline-block;
				color: rgba(255,255,255,.3);
				/* color: gray; */
				background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 30px, rgba(255, 255, 255, 0) 60px);
				background-repeat: no-repeat;
				-webkit-background-clip: text;
			}
			
			/* h1:hover{
				background-position: 500px 0;
			} */
		</style>
	</head>
	<body>
		<h1>哈哈哈</h1>
		<script type="text/javascript">
			var h1 = document.querySelector("h1")
			var flag = 0

			/**
			 * 这里最好是1秒钟60次，那么这里的15表示15毫秒flag增加一次。
			 */
			setInterval(function() {
				flag++
				h1.style.backgroundPositionX = flag + "px"
				flag = flag >= 150 ? -80 : flag;
			}, 15)
		</script>
	</body>
</html>
